<script setup>
import {ref} from "vue";
import axios from "axios";
import {ElMessageBox} from "element-plus";
import router from "../router/index.js";

let pList = ref([]);
const sort = ref('');

const isShow = ref(false);
const show = async () => {
  let result = await axios.get('../public/data.json');
  let results = [];

  if (sort.value === '主食精选') {
    results = result.data.filter((item) => item.type === sort.value);
  } else if (sort.value === '水产海鲜') {
    results = result.data.filter((item) => item.type === sort.value);
  } else if (sort.value === '小吃') {
    results = result.data.filter((item) => item.type === sort.value);
  } else {
    results = result.data.filter((item) => item.type === '烘焙');
  }

  pList.value = results.slice(0, 5);
  isShow.value = true;
}
const setSort = (type) => {
  sort.value = type;

  show();
};
const clear = () => {
  isShow.value = false;
  console.log("移开")
};

const handleCart = (productID) => {

  if (sessionStorage.getItem('username')) {
    let cart = JSON.parse(sessionStorage.getItem('cart')) || [];
    let product = pList.value.find(product => product.id === productID);
    if (product) {
      let index = cart.findIndex(item => item.id === product.id);
      if (index !== -1) {
        cart[index].count++;
      } else {
        product.count = 1;
        cart.push(product);
      }

      sessionStorage.setItem('cart', JSON.stringify(cart));
      ElMessageBox.confirm(
          '<ion-icon name="cart-outline"></ion-icon>加入购物车成功！立马去查看',
          '温馨提示',
          {
            confirmButtonText: '迫不及待！',
            cancelButtonText: '我还想要更多',
            type: 'success',
            dangerouslyUseHTMLString: true,
          }
      )
          .then(() => {
            router.push("/User/cart");
          })

    }
  } else {
    ElMessageBox.confirm(
        '您还未登录，是否去登陆？',
        '温馨提示',
        {
          confirmButtonText: '立马去',
          cancelButtonText: '我先看看',
          type: 'warning',
        }
    )
        .then(() => {
          router.push("/login");
        })

  }
}
</script>
<template>
  <div @mouseleave="clear()">
    <!-- 导航 -->
    <el-form class="nav">
      <el-link :underline="false" class="text" @mouseenter="setSort('主食精选')">主食精选</el-link>
      <el-link :underline="false" class="text" @mouseenter="setSort('水产海鲜')">水产海鲜</el-link>
      <el-link :underline="false" class="text" @mouseenter="setSort('小吃')">小吃</el-link>
      <el-link :underline="false" class="text" @mouseenter="setSort('烘焙')">烘焙</el-link>
    </el-form>
    <div class="right1 head">
      <!--     -->
      <div v-if="isShow" v-for="product in pList" class="product" :key="product.id">
        <div class="add" @click="handleCart(product.id)">
          <ion-icon name="cart-outline"></ion-icon>
        </div>
        <router-link :to="'Detail/'+product.id">
          <div class="detail">
            <ion-icon name="ellipsis-horizontal-outline"></ion-icon>
          </div>
        </router-link>

        <div class="imgcontainer">
          <img :src="'/products/' + product.img" alt="" class="img">
        </div>
        <h3 class="name">{{ product.name }}</h3>
        <p class="price">{{ product.price }}元</p>
      </div>
    </div>


  </div>


</template>
<style scoped>


/* 	导航栏 开始*/
.nav {
  width: 800px;
  height: 100px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.right1 {
  display: flex;
  flex-flow: row wrap;
  /*align-items: center;*/
  justify-content: center;
}

.head {
  z-index: 50;
  top: 23%;
  left: 17.5%;
  transform: translate(-10%, -7%);
  width: 1200px;
  position: absolute;
  background-color: #ffffff;
}

.product {
  background-color: rgb(255, 255, 255);
  display: block;
  margin: 0.35em;
  justify-content: center;
  text-align: center;
  z-index: 2;
  width: 220px;
}

.product:hover {
  box-shadow: 0 15px 30px rgb(0 0 0 / 10%);
  transform: translate3d(0, -2px, 0);
  transition: all .25s linear;
  opacity: 0.5;

}

.product .add {
  height: 2em;
  width: 2em;
  font-size: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  border-radius: 50px;
  color: #fff;
  background-color: #000000;
  cursor: pointer;
  display: none;
  left: calc(50% - 3rem);
}

.add ion-icon {
  /* 垂直居中的关键 */
  height: 100%;
}

.product:hover .add {
  display: block;
  z-index: 3;
  bottom: calc(50% - 1rem);
  opacity: 1;
}

.product:hover .add:hover {
  color: #2dfc52;
  filter: drop-shadow(0 0 2px #2dfc52) drop-shadow(0 0 5px #2dfc52) drop-shadow(0 0 15px #2dfc52);
}

.product .detail {
  height: 2em;
  width: 2em;
  font-size: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  border-radius: 50px;
  color: #fff;
  background-color: #000000;
  cursor: pointer;
  display: none;
  left: calc(50% + 1rem);
}

.detail ion-icon {
  /* 垂直居中的关键 */
  height: 100%;
}

.product:hover .detail {
  display: block;
  z-index: 3;
  bottom: calc(50% - 1rem);
  opacity: 1;
}

.product:hover .detail:hover {
  color: #2dfc52;
  filter: drop-shadow(0 0 2px #2dfc52) drop-shadow(0 0 5px #2dfc52) drop-shadow(0 0 15px #2dfc52);
}

.name {
  display: block;
  font-family: var(--text-font-family);
  font-size: 1.15em;
}

.price {
  font-size: 12px;
  color: #ff6700;
  font-family: "Helvetica Neue";
}

.text {
  list-style-type: none;
  font-size: 16px;
  color: #333;
}

.text:hover {
  color: #ff6700;
}

.img {
  max-width: 220px;
  max-height: 200px;
}
</style>